<h3>User Story Page</h3>
<form id="storyForm" name="storyForm" data-ng-submit="addStory()">
    <h4>{{service.translation.asSentence}}{{story.role.roleName}}{{service.translation.wantSentence}}{{story.goal}}{{service.translation.soSentence}}{{story.benefit}} ({{story.storyPoints}}  sp)<input type="submit" value="add"></h4>
    <span data-ng-click="newStory()">[New]</span>
    <table>
        <tr>
            <td>{{story.id}}</td><!-- bug with that -->
            <td>{{service.translation.asSentence}}
                <select data-ng-model="story.role" data-ng-options="r.roleName for r in roles">
                    <option value="">-- Choose role --</option>
                </select>{{service.translation.wantSentence}}<input type="text" data-ng-model="story.goal">{{service.translation.soSentence}}<input type="text" data-ng-model="story.benefit">
                <input type="number" min="-3" max="100" data-ng-model="story.storyPoints">
            </td>
        </tr>
    </table>
</form>
<table>
    <tr data-ng-repeat="userStory in preparedUserStories | orderBy:'storyPoints'">
        <td>{{$index + 1}}. </td>
        <td>{{service.translation.asSentence}}{{userStory.role.roleName}}{{service.translation.wantSentence}}{{userStory.goal}}{{service.translation.soSentence}}{{userStory.benefit}}</td>
        <td>({{userStory.storyPoints}}sp)</td>
        <td data-ng-click="editStory(userStory)">[Edit]</td>
    </tr>
</table>